import React, {Component} from 'react';
import $ from 'jquery';
import _ from 'lodash/object';
import * as tools from '../../../tools/tools';
import TreePanel from '../../../components/TreePanel/TreePanel';
import { Form, Input, DatePicker, Row, Col, TimePicker, Select, Cascader, InputNumber, Modal } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class RoleAddForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            confirmDirty: false,
            cRights : [],
        }
    }
    handleSubmit = (e) => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                var ids = this.state.cRights;
                if(ids.length == 0 && this.props.oldData.oldIds.length == 0) {
                    return
                }
                if(this.props.isModify == 0) {
                    values.node = ids;
                    this.addRole(values);
                }else {
                    if(ids.length <= 0) {
                        values.node = this.props.oldData.pivot;
                    }else {
                        values.node = ids;
                    }
                    this.upDateRole(values);
                }
                
            }
        });
    }
    
    addRole = (data) => {
        
        data.token = localStorage.token;
        console.log('data', data);
        var that = this;
        $.ajax({
            url : tools.apiUrl + 'manage/roleadd',
            data,
            type : 'post',
            success : function(res) {
                that.props.onCancel();
                that.props.upDate();
            }
        })
    }

    upDateRole = (data) => {
        data.token = localStorage.token;
        data.id = this.props.oldData.id;
        console.log('data', data);
        var that = this;
        $.ajax({
            url : tools.apiUrl + 'manage/up_role',
            data,
            type : 'post',
            success : function(res) {
                that.props.onCancel();
                that.props.upDate();
            }
        })
    }

    onCheck = (checkedKeys, info) => {
        var allKey = [];
        //处理点击
      
        checkedKeys.forEach(val => {
            var arr = {};
            arr['node_id'] = val;
            arr['check_status'] = 1
            allKey.push(JSON.stringify(arr))
        })
    
        //处理半点击
        info.halfCheckedKeys.forEach(val => {
            var arr = {};
            arr['node_id'] = val;
            arr['check_status'] = 2
            allKey.push(JSON.stringify(arr))
        });


        this.setState({
            cRights : allKey
        })
    }
    
    cancelControl = () => {
        this.props.form.resetFields();
        this.props.onCancel();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        var oldData = this.props.oldData;
        if(oldData.id > 0) {
            var initData = oldData;
            var oldIds = oldData.oldIds;
        }else {
            var initData = {};
            var oldIds = null;
        }
        return (
            <div>
                <Modal
                    {...this.props.modalStyle}
                    onCancel={this.cancelControl}
                    onOk={this.handleSubmit}
                >
                    <Form>
                        <div className="modal_add_title">
                            <span>角色信息</span>
                        </div>
                        <Row>
                            <Col span={13}>
                                <FormItem
                                    label="角色名称"
                                    hasFeedback
                                >
                                    {getFieldDecorator('name', {
                                        rules: [{
                                            max : 10,
                                            required: true,
                                            message: '请输入角色名称',
                                        }],
                                        initialValue : initData.name
                                    })(
                                        <Input placeholder="请输入角色名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={13}>
                                <FormItem
                                    label="角色描述"
                                    hasFeedback
                                >
                                    {getFieldDecorator('remark', {
                                        rules: [{
                                            max : 10,
                                            required: true,
                                            message: '请输入角色角色描述',
                                        }],
                                        initialValue : initData.remark
                                    })(
                                        <Input placeholder="请输入角色角色描述" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <div className="modal_add_title">
                            <span>权限分配</span>
                        </div>
                        <div>
                            <TreePanel 
                                treeData={this.props.treeData}
                                checkable
                                onCheck={this.onCheck}
                                oldIds={oldIds}
                            />
                        </div>
                    </Form>
                </Modal>
            </div>
        )
    }
    
}
const WrapRoleAddForm = Form.create()(RoleAddForm);

export default WrapRoleAddForm